<template>
  <div class="home_container">
    <!-- 顶部导航模块 -->
    <div class="nav">
      <div
        class="nav_item"
        :class="{ active: typeOneWord == item }"
        v-for="(item, index) in typeOneList"
        :key="index"
        @click="changeTip(item)"
      >
        {{ item }}
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  props: [],
  data() {
    return {
      typeOneWord: "",
    };
  },
  computed: {
    ...mapState(["typeOneList"]),
  },
  watch: {
    $route(newV) {
      if (newV.path !== "/dashboard/home/goodlist") this.typeOneWord = "";
    },
  },
  created() {},
  methods: {
    //点击头部导航栏，跳转商品检索页面,并派发获取商品的数据
    async changeTip(item) {
      this.typeOneWord = item;
      await this.getTypeTwoList(item);
      this.$router.push({ name: "goodlist" });
    },
    //根据二级列表
    async getTypeTwoList(word) {
      const res = await this.$store.dispatch("getTypeTwoList", word);
      for (let i = 0; i < res.length; i++) {
        await this.getTypeTwoDataList(word, res[i], i);
      }
    },
    // 获取二级商品列表
    async getTypeTwoDataList(type_one, type_two, index) {
      await this.$store.dispatch("getTypeTwoDataList", {
        type_one,
        type_two,
        index,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home_container {
  width: 1000px;
  margin: 0 auto;
  background-color: #eee;
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    .nav_item {
      line-height: 40px;
      font-size: 15px;
      font-weight: 500;
      padding: 10px;
      cursor: pointer;
      border-radius: 3px;
    }
    .active {
      color: red;
      font-weight: 900;
    }
  }
}
</style>